<template>
    <BaseEcharts :options="option" :styleConfig="{ width: '400px', height: '400px' }" />
</template>

<script lang="ts" setup>
let option = ref({
    series: [
        {
            type: 'pie',
            radius: ['40%', '50%'],
            label: {
                show: false
            },
            emphasis: {
                label: {
                    show: true
                }
            },
            data: [
                { value: 335, name: '直达' },
                { value: 310, name: '邮件营销' },
                { value: 234, name: '联盟广告' },
                { value: 135, name: '视频广告' },
                { value: 1548, name: '搜索引擎' }
            ],
            // 第一个环形图
            silent: true,
            z: 10
        },
        {
            type: 'pie',
            radius: ['40%', '50%'],
            label: {
                show: false
            },
            emphasis: {
                label: {
                    show: true
                }
            },
            data: [
                { value: 335, name: '直达' },
                { value: 310, name: '邮件营销' },
                { value: 234, name: '联盟广告' },
                { value: 135, name: '视频广告' },
                { value: 1548, name: '搜索引擎' }
            ],
            // 第二个环形图
            itemStyle: {
                borderColor: '#fff',
                borderWidth: 2
            },
            z: 15 // 比第一个图的 z 值大，显示在上方
        }
    ]
});
</script>
